<template>
  <div class="submit-content-history">
    <div class="HistoryTitleBox">
      <!-- <div class="top-icon">图标</div> -->
      <vue-icon iconClass="rili" class="top-icon" size="3.5vw" color="#1297db"></vue-icon>
      <div>
        <p style="font-size: 2.3vh; position: relative; right: -1.5vw">历史提交记录</p>
        <p style="font-size: 1.7vh">Historical commit records</p>
      </div>
    </div>
    <DatePicker class="calendar"></DatePicker>
    <div class="pastWork">
      <div class="pastTop">
        <div>
          <div class="pen">
            <vue-icon iconClass="zuoye" color="black" class="icon-zuoye" size="3vh"></vue-icon>
            <span>作业详情</span>
          </div>
        </div>
        <div class="subMit" @click="jobDetail">
          <span>查看详情 </span>
          <vue-icon icon-Class="youjiantou" class="subMitjiantou"></vue-icon>
        </div>
      </div>
      <div class="textTime">{{  curWork.name }}</div>
      <div class="textDeadline">截至提交时间：{{ curWork.stop }}</div>
    </div>
    <div class="proBar">
      <div class="proBarCon">
        <div class="Bartext">本周已提交</div>
        <div class="BarBox" :style="styleVar">
          <div class="Bar"></div>
          <div class="BarConWeek"></div>
        </div>
      </div>
      <div class="proBarCon">
        <div class="Bartext">任务总进度</div>
        <div class="BarBox" :style="styleVar">
          <div class="Bar"></div>
          <div class="BarConWeekend"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {greenwichTransform} from '../../utils/date'
import DatePicker from './DatePicker';
export default {
  data() {
    return {
      //作业标题
      textTime: '适应期第一周作业',
      //作业提交截止时间
      textDeadline: '2.9',
      //本周是否提交作业
      wek_width: 0,
      //用户提交的作业数
      user_work: 0,
      //作业总数
      workTotal: 0,
      worklist: [],
      direction: '',
    };
  },
  components: {
    DatePicker,
  },
  props:{
    userInfo:{
        type:String,
        default:{
         name: null,
         direction: '',
         work_list:[],
        },
        require:true
    },
    curWork:{
        type:Object,
        default:{
        name:'-',
        message:'',
        stop:''
        },
        require:true
    }
  },
  computed: {
    //渲染进度条的长度
    getUserWork(){
        return this.userInfo?.work_list?.length|| 0
    },
    getWorkTotal(){
        return this.workList?.length || 0
    },
    getWeekWidth(){
        if(this.getUserWork==this.getWorkTotal){
        return 16
        }
        return 0
    },
    getCurrentInfo(){
        return this. curWork
    },
    styleVar() {
      return {
        '--wek-width': this.getWeekWidth + 'vw',
        '--wekend-width': this.getlength() + 'vw',
      };
    },

  },
  methods: {
    jobDetail() {
      this.$router.push('/jobDetail');
    },
    getlength() {
      const length = Math.floor((this.getUserWork/ this.getWorkTotal) * 16);
      return length;
    },
  },
};
</script>

<style lang="less" scoped>
.submit-content-history {
  width: 31%;
  height: 85vh;
  background-color: rgba(217, 228, 241, 0.7);
  border-radius: 40px;
}

.HistoryTitleBox {
  height: 3vw;
  // background: wheat;
  margin: 2.7vw 26.7px 0px 26.7px;
  display: flex;
  justify-content: center;
  position: relative;
  .top-icon {
    line-height: 3vw;
    position: absolute;
    left: 0px;
    top: -1vh;
  }
}

.pastWork {
  font-size: 1.9vh;
  border-radius: 1vw;
  margin: 0px 1.3vw 4.8vh 1.3vw;
  padding: 1vh 1vw 1.9vh 1vw;
  background-color: rgba(183, 208, 239, 0.75);
  .pastTop {
    display: flex;
    height: 3.5vh;
    width: 100%;
    justify-content: space-between;
    padding: 0px 1.3vw 0px 0;
    margin-bottom: 1vh;
    font-size: 18px;
    .pen {
      font-size: 2.6vh;
      background-color: rgba(223, 232, 247, 0.5);
      border-radius: 0.6vh;
      line-height: 30px;
      padding: 0px 1vw 0px 0.2vw;
      span {
        margin-left: 0.5vw;
      }
      .icon-zuoye {
        position: relative;
        transform: rotate(45deg);
        top: 0.5vh;
      }
    }
    .subMit {
      position: relative;
      left: 2vw;
      cursor: pointer;
    }
  }
  .textTime {
    font-size: 2.3vh;
    margin-bottom: 0.6vh;
  }
  .textDeadline {
    font-size: 2.1vh;
  }
}

.calendar {
  height: 42.3vh;
  margin: 1.9vh 3vw 2.3vh 3vw;
  background-color: rgba(196, 212, 234, 0.6);
}

.proBar {
  margin: 2.6vh 1.3vw 0px 1.3vw;
  height: 6.8vh;
  .proBarCon {
    display: flex;
    justify-content: space-around;
    margin: 1vh 0.5vw;
    .Bartext {
      font-size: 2.2vh;
      position: relative;
      top: -0.7vh;
    }
    .BarBox {
      position: relative;
      .Bar {
        width: 16vw;
        height: 1.9vh;
        border-radius: 0.9vw;
        background-color: #4990e2;
      }
      .BarConWeek {
        width: var(--wek-width);
        height: 1.9vh;
        border-radius: 0.94vw;
        background-color: white;
        position: absolute;
        top: -0.09vh;
      }
      .BarConWeekend {
        width: var(--wekend-width);
        // width: 1vw;
        height: 1.9vh;
        border-radius: 0.94vw;
        background-color: white;
        position: absolute;
        top: -0.09vh;
      }
    }
  }
}
</style>
